<template>
    <div class="home-container">
        <el-card shadow="never" class="user-card">
            <el-avatar
                icon="el-icon-user-solid"
                size="large"
                shape="circle"
                :src="avatar"
                fit="fill"
            ></el-avatar>
            <div class="introduce">
                <h1>{{ time }}好{{ nickName }}</h1>
                <span>{{ title }}</span>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import setting from '@/setting'
import useUserStore from '@/store/modules/user'
import getTime from '@/utils/time'
import { storeToRefs } from 'pinia'
const time = getTime()
const userStore = useUserStore()
let { avatar, nickName } = storeToRefs(userStore)
const title = setting.title
</script>

<style lang="less" scoped>
.home-container {
    .user-card {
        :deep(.el-card__body) {
            display: flex;
            align-items: center;
            .introduce {
                margin-left: 20px;
                h1 {
                    font-weight: 800;
                    font-size: 20px;
                    margin-bottom: 10px;
                }
                span {
                    color: grey;
                    font-style: italic;
                }
            }
        }
    }
}
</style>
